/**
 * @description  : 内管实地核查-零售户详情
 * @descriptionDetail : 内管实地核查-零售户详情
 * @copyright    : 浙江烟草
 * @author       : mwq
 * @create       : 2022-12-05 10:55:34
 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <view class="content u-skeleton">
      <u-row gutter="16" class="u-skeleton-rect">
        <u-col span="12">
          <view style="display: inline-flex;">
            <view class="title">
              {{ retailer.licNo || "无" }}
            </view>
            <view class="sub-desc">
              许可证号
            </view>
          </view>
        </u-col>
        <u-col span="12">
          <view style="display: inline-flex;">
            <view class="title">
              {{ retailer.companyName || "无" }}
            </view>
            <u-tag text="重点监管户" shape="circle" />
          </view>
        </u-col>
        <u-col span="12">
          <u-icon
            style="margin-top: 10px;"
            class="sub-desc"
            name="map"
            :label="retailer.businessAddr" 
            color="#2979ff"
            label-color="#999"
            label-size="28"
            size="28"
          ></u-icon>
        </u-col>
      </u-row>
      <u-divider bg-color="#E0E0E0" margin-top="30"></u-divider>
      <u-grid :col="3" :border="false" class="u-skeleton-rect">
        <u-grid-item :custom-style="infoStyle">
          <view class="sub-desc">
            风险指数
          </view>
          <view class="sub-title" style="color:#FE2C2C;">
            80
          </view>
        </u-grid-item>
        <u-grid-item :custom-style="infoStyle">
          <view class="sub-desc">
            定档位
          </view>
          <view class="sub-title">
            {{ retailer.custTypeName }}
          </view>
        </u-grid-item>
        <u-grid-item :custom-style="infoStyle">
          <view class="sub-desc">
            电话号码
          </view>
          <view class="sub-title">
            <u-icon
              class="sub-desc"
              name="phone"
              :label="retailer.retailTel" 
              color="#2979ff"
              label-color="#333"
              label-size="28"
              size="28"
            ></u-icon>
          </view>
        </u-grid-item>
      </u-grid>
      <!-- 信息查询菜单 -->
      <view style="margin-top: 10px;" class="u-skeleton-fillet">
        <u-card title="信息查询" margin="0rpx" border-radius="70" :head-style="headStyle" :body-style="bodyStyle">
          <template #body>
            <view>
              <u-grid :col="3" :border="false">
                <u-grid-item v-for="(item, idx) in infoMenus" :key="idx" @click="handleInfoMenu(item)">
                  <u-icon :name="item.icon" color="#000" :size="48"></u-icon>
                  <view class="grid-text">
                    {{ item.label }}
                  </view>
                </u-grid-item>
              </u-grid>
            </view>
          </template>
        </u-card>
      </view>
    </view>
    <!--引用组件-->
    <u-skeleton :loading="loading" :animation="true"></u-skeleton>
  </view>
</template>
<script>
/**
 * 零售户详情
 */
import certService from "@/service/certificate/certificate.service"
export default {
  data() {
    return {
      retailerUuid: "",
      licNo: "",
      retailer: {},
      infoMenus: [
        {label: "档案信息", type: "archive", path: "/pages/retailer/retailerInfo/retailerInfo", icon: "../../../static/internal/da_icon.png",},
        {label: "订单信息", type: "order", path: "/pages/retailer/retailerCard/orderList", icon: "../../../static/internal/order_icon.png",},
        {label: "违规案件", type: "violation", path: "/pages/retailer/retailerCard/violationList", icon: "../../../static/internal/case_icon.png",},
        {label: "卷烟流出", type: "out", path: "/pages/retailer/retailerCard/outFlowList", icon: "../../../static/internal/out_icon.png",},
        {label: "预警信息", type: "warn", path: "/pages/retailer/retailerCard/warningList", icon: "../../../static/internal/warn_icon.png",},
        {label: "检查走访", type: "check", path: "/pages/retailer/retailerCard/checkHistoryList", icon: "../../../static/internal/check_icon.png",},
        {label: "送货记录", type: "cargo", path: "", icon: "../../../static/internal/sh_icon.png",},
        {label: "结算记录", type: "bill", path: "/pages/retailer/retailerCard/settlementList",icon: "../../../static/internal/js_icon.png",},
      ],
      loading: true,
      headStyle: {
        fontWeight: 600,
      },
      bodyStyle: {
        paddingTop: 0,
      },
      infoStyle: {
        alignItems: 'flex-start',
      },
      longitude: 0, // 经度
      latitude: 0,  // 纬度
    }
  },
  onLoad(options) {
    this.retailerUuid = options.retailerUuid;
    this.licNo = options.licNo;
    this.queryRetailer();
  },
  methods: {
    // 查询零售户信息
    queryRetailer() {
      certService.getRetailer(this.retailerUuid, this.licNo).then(dr => {
        this.loading = false;
        if (dr.success) {
          this.retailer = dr.bean;
        }
      });
    },
    // 点击信息查询模块菜单
    handleInfoMenu(mItem) {
      console.log("点击", mItem);
      if (!mItem.path) {
        this.$u.toast("功能开发中");
        return;
      }
      this.$u.route(`${mItem.path}?retailerUuid=${this.retailer.retailerUuid}&licNo=${this.retailer.licNo}`);
    },
  },
}
</script>
<style lang="scss" scoped>
.content {
  background-color: #FFF;
  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    color: #333333;
    margin-right: 15px;
  }
  .sub-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    color: #999999;
  }
  .sub-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: #333333;
  }
  .opt-img {
    position: absolute;
    z-index: 99;
    left: 0px;
    top: -30px;
    width: 100%;
  }
  .grid-text {
    font-size: 28rpx;
		margin-top: 10rpx;
		color: #333;
  }
}
</style>